<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>柱状图</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <v-charts style="width:100%;height:450px" :options="options"></v-charts>
    </el-card>
  </div>
</template>

<script>
import Vue from "vue";
// 导入echarts
// bar是柱状图所需的核心文件
import "echarts/lib/chart/bar";
// 显示标题需要的核心文件
import "echarts/lib/component/title";
// 显示legend
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
// 导入vue-echarts
import Echarts from "vue-echarts";
// 注册全局组件
Vue.component("v-charts", Echarts);
export default {
  data() {
    return {
      options: {
        title: {
          show: true,
          text: "月销售额统计"
        },
        // 鼠标悬浮的时候显示提示工具
        tooltip: {
          show: true
        },
        xAxis: {
          type: "category",
          //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            data: [],
            type: "bar"
          }
        ]
      }
    };
  },
  methods: {
    getData() {
      this.$http.get("/index.php?c=charts&a=index").then(({ data }) => {
        //   console.log(data);
        const xData = [];
        const yData = [];
        data.forEach((item, index) => {
          xData.push(`${index + 1}月`);
          yData.push(item.total);
        });

        // 错误做法: 此种做法并不能触发界面层的更新
        // this.options.xAxis.data = xData;
        // this.options.series[0].data = yData;
        // 必须给options对象重新赋值, 才能触发页面的刷新
        Object.assign(this.options, {
          xAxis: { data: xData },
          series: [{ data: yData }]
        });
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style>
</style>